// Copyright (c) 2025 coze-dev Authors
// SPDX-License-Identifier: Apache-2.0
/* stylelint-disable declaration-no-important */
.compare-execute {
  overflow: hidden;
  display: flex;
  flex: 1;
  flex-direction: column;

  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 0 10px 0 0;

  background: #fff;
  border-radius: var(--semi-border-radius-medium);
}

.compare-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 24px;
}

.draft-title {
  display: flex;
  gap: 4px;
  align-items: center;
  font-weight: 600;

  .chevron-icon {
    cursor: pointer;
    transition: transform 0.3s;

    &.chevron-icon-close {
      transform: rotate(180deg);
    }

    &:hover {
      color: var(--semi-color-primary);
    }
  }
}

.compare-content {
  display: flex;
  flex-direction: column;
  gap: 6px;

  margin-top: 4px;
  padding: 0 16px 10px;

  :global {
    .semi-select-small {
      .semi-select-selection-text {
        font-size: 12px !important;
      }
    }
  }
}

.small-model-config {
  :global {
    .semi-typography {
      font-size: 12px;
    }

    .semi-icon-default {
      font-size: 14px;
    }
  }
}

.tooltip-editor {
  :global {
    .current-line {
      border-color: transparent !important;
    }
  }
}

.execute-area-content {
  position: relative;

  overflow: hidden auto;
  // flex flex-col flex-1 overflow-y-auto overflow-x-hidden
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 16px;

  padding: 0 24px 0 0;

  &-img {
    position: absolute;
    top: calc(50% - 24px);
    left: calc(50% - 24px);

    width: 48px;

    opacity: 0.6;
  }

  &-to-bottom{
    pointer-events: none;
    cursor: pointer;

    position: absolute;
    z-index: 10;
    right: 16px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    opacity: 0;
    background: var(--Bg-COZ-bg-max, #FFF);
    border: 1px solid var(--Stroke-COZ-stroke-primary, rgba(82, 100, 154, 13%));
    border-radius: 50%;


    transition: opacity 0.3s;

    &:hover {
      background-color: #f5f5f5;
    }

    &.visible {
      pointer-events: auto;
      opacity: 1;
    }
  }
}
